<template>
  <md-page
    title="商品券确认信息"
    backUrl="/pages/my/index"
    isBtn
    :btnTextItems="data.btnTextItems"
    @btnClick="bottomBtnClick">
    <view class="container">
      <view class="form-item-wrap">
        <view class="form-label">商品名称</view>
        <text class="form-item" selectable user-select>
          {{ data.info.name }}
        </text>
      </view>
      <view class="form-item-wrap">
        <view class="form-label">商品状态</view>
        <text class="form-item">
          {{ data.info.is_used_name }}
        </text>
      </view>
      <view class="form-item-wrap">
        <view class="form-label">商品图片</view>
        <view class="form-item">
          <image
            :src="data.info?.img"
            :style="{ width: '200rpx', height: '140rpx' }"
            @click="() => handlePreview(data.info?.img)" />
        </view>
      </view>
    </view>
  </md-page>
</template>

<script setup lang="ts">
import { reactive } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import type { BtnTextItem } from '@/components/md-ui/components/md-page/md-page.vue';
// 接口
import { goodsCouponCheck, goodsCouponDetail } from '@/api';
import type { Match } from '@/api/data';

const data = reactive<any>({
  query: {}, // 页面传参
  btnTextItems: [{ text: '取消', key: 'cancel' }],
  info: {},
});

const backMy = () => {
  uni.switchTab({ url: '/pages/my/index' });
};

// 图片预览
const handlePreview = (url: string) => {
  if (!url) return;
  uni.previewImage({
    current: url,
    urls: [url],
  });
};

const bottomBtnClick = async (info: { item: BtnTextItem }) => {
  const { key } = info.item;
  // 通过审核
  if (key === 'ok') {
    uni.showModal({
      title: '提示',
      content: '是否确认提交?',
      success: res => {
        if (res.confirm) {
          fetchGoodsCouponCheck();
        }
      },
    });
  } else {
    //  取消
    backMy();
  }
};

/**
 * 接口相关
 */
// 确认信息
const fetchMatchScanCodeDetail = async (coupon_code: string) => {
  try {
    const res = await goodsCouponDetail({
      coupon_code,
    });
    // 未使用才显示按钮
    if (res.data?.is_used == 2) {
      data.btnTextItems = [
        { text: '取消', key: 'cancel' },
        { text: '核销', key: 'ok' },
      ];
    }
    data.info = res.data;
  } catch (error) {}
};

// 信息确认提交
const fetchGoodsCouponCheck = async () => {
  try {
    const res = await goodsCouponCheck({ coupon_code: data.query?.code, id: data.query?.id });
    uni.showModal({
      title: '提示',
      content: res?.msg || '提交成功',
      showCancel: false,
      success: res => {
        if (res.confirm) {
          backMy();
        }
      },
    });
  } catch (error) {}
};

onLoad(option => {
  data.query = option;
  // console.log(option);
  fetchMatchScanCodeDetail(option?.code);
});
</script>

<style lang="scss" scoped>
.container {
  padding: 30rpx;
  box-sizing: border-box;
  & > view {
    margin-bottom: 20rpx;
  }
  // 报名信息
  .form-item-wrap {
    .form-label {
      height: 36px;
      line-height: 36px;
      padding-bottom: 10px;
      font-size: 14px;
      color: #606266;
    }
    .form-item {
      display: block;
      background: white;
      border-radius: 10rpx;
      padding: 30rpx 20rpx;
    }
  }
}
</style>
